<template>
  <a-drawer :width="700" v-model:visible="cateManageDialog" title="考勤登记" placement="right">
    <a-form ref="formStateRef" :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }"
      autocomplete="off">
      <a-form-item label="请假部门:" name="sector">
        <a-radio-group v-model:value="formState.sector" name="sector">
          <a-radio :value="1">技师</a-radio>
          <a-radio :value="2">楼面</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="请假人员:" name="userIds" :rules="[{ required: true, message: '内容不能为空' }]">
        <a-select v-model:value="formState.userIds" mode="tags" :options="enptyOption"></a-select>
      </a-form-item>
      <a-form-item label="考勤原因:" name="leaveType" :rules="[{ required: true, message: '内容不能为空' }]">
        <a-select v-model:value="formState.leaveType" :options="leaveTypeList"></a-select>
      </a-form-item>
      <a-form-item label="牌位设置:" name="rankedType" :rules="[{ required: true, message: '内容不能为空' }]">
        <a-select v-model:value="formState.rankedType" :options="rankedTypeList"></a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
        <span style="color:#E7B047;font-size: 12px;">备注:若该技师没有分班，考勤原因选"所在班次头牌“或者"所在班次尾牌"即按 全部的头牌"和"全部的尾牌"处理。</span>
      </a-form-item>
      <a-form-item label="开始时间:" name="beganTime" :rules="[{ required: true, message: '内容不能为空' }]">
        <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="formState.beganTime" />
      </a-form-item>
      <a-form-item label="结束时间:" name="endTime" :rules="[{ required: true, message: '内容不能为空' }]">
        <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="formState.endTime" />
      </a-form-item>
      <a-form-item label="实算天数:" name="day" :rules="[{ required: true, message: '内容不能为空' }]">
        <a-input-number v-model:value="formState.day" :min="0" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
        <span style="color:red;font-size: 12px;">备注:请假至少为0.5天(即半天);暂不支持跨月请假,如需跨月请假，请分月请假</span>
      </a-form-item>
      <a-form-item label="备注:">
        <a-textarea v-model:value="formState.remark" :allowClear="true" :showCount="true" :maxlength="30" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
        <a-button type="primary" html-type="submit" @click="submitVal">提交</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script setup>
import bizAttendanceApi from '@/api/biz/bizAttendanceApi'
const leaveTypeList = [{
  label: '报停',
  value: 0
}, {
  label: '请假',
  value: 1
}, {
  label: '病假',
  value: 2
}, {
  label: '休息',
  value: 3
}, {
  label: '休假',
  value: 4
}, {
  label: '旷工',
  value: 5
}]
const rankedTypeList = [{
  label: '不动牌',
  value: 0
}, {
  label: '所在班次头牌',
  value: 1
}, {
  label: '所在班次尾牌',
  value: 2
}, {
  label: '全部头牌',
  value: 3
}, {
  label: '全部尾牌',
  value: 4
}, {
  label: '固定的位置',
  value: 5
}]
let formState = ref({
  sector: 1,
  userIds: [],
  leaveType: '',
  rankedType: '',
  beganTime: '',
  endTime: '',
  day: '',
  remark: '',
});
const cateManageDialog = ref(false)
const onOpen = (record) => {
  cateManageDialog.value = true
}
let enptyOption = ref([])
const formStateRef = ref();
const submitVal = ()=>{
  formStateRef.value.validate().then(()=>{
    bizAttendanceApi.bizAttendanceSubmitForm(formState.value).then(res=>{
      console.log(res)
    })
  })
}
defineExpose({
  onOpen
})
</script>